<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="sampleId">
    <div>Input Your AGE:<input type="text" v-model="age"></div>
    <div>Age is {{age}}</div>
    <div v-if="age>=18">I am adult</div>
    <div v-else>I am child</div>
</div>
<br>
<br>
<br>
<br>
<div id="sampleId2">
    <div>
        Name:<input type="text" v-model="person.name"><label v-show="nameError">Invalid name</label><br>
        Age:<input type="text" v-model="person.age"><label v-show="ageError">Invalid age</label><br>
        <input type="button" name="addPerson" value="Add Person" v-on:click="addPerson()">
    </div>
    <table>
        <tr>
            <th>index</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr v-for="(p,index) in persons">
            <td>{{index+1}}</td>
            <td>{{p.name}}</td>
            <td>{{p.age}}</td>
        </tr>
    </table>
</div>
</body>
<script src="layout/scripts/vue.js"></script>
<script type="application/javascript">
    //双向数据绑定 > sample
    var sampleData = {age: 18};
    var sample = new Vue({
        el: "#sampleId",
        data: sampleData
    });

    //动态添加数据到列表 > Sample
    var sampleData2 = {
        persons:[],
        person:{},
        nameError:false,
        ageError:false,

    };
    var sample2 = new Vue({
        el:"#sampleId2",
        data:sampleData2,
        methods:{
            addPerson:function(){
                var haserror = false;
                if(this.person.name===undefined || this.person.name==="" ){
                    haserror = true;
                    this.nameError = true;
                }else{
                    this.nameError = false;
                }
                if(this.person.age===undefined || this.person.age===""){
                    haserror = true;
                    this.ageError = true;
                }else{
                    this.ageError = false;
                }
                if(haserror){
                    return;
                }
                sampleData2.persons.push(this.person)
                this.person = {};
            }
        }
    });


</script>
</html>